<template>
  <div class="sampleComparison tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:110px">
        <el-date-picker v-model="dateRange" type="month" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM"></el-date-picker>
      </div>&emsp;&emsp;
      <span>监测项目 : </span>
      <div class="layoutBox" style="width:190px">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in optionData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>&emsp;&emsp;
      <el-button @click="search"><i class="iconfont icon-sousuo"></i>查询</el-button>
      <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <div class="currency-mode-wrap scrollSpecial">
      <div class="reminder-wrap">
        <!-- <span class="reminder-title">温馨提示</span>
        <div class="reminder-content">
          <div class="reminder-text">
            <p>所选时间段内共有“多点线性核查移”x次，共有合格项m次，不合格项y次。影响数据n条。点位1、点位2的上次周核查时间距今已有7天；站点3的上次周核查距今已有6天。</p>
            <div><el-button type="noticonsecondBtn"> 生成任务 </el-button></div>
          </div>
        </div> -->
        <div class="reminder-toolbar">
          <div class="state-legend">
            <span><i class="qualified-icon"></i> 合格</span>
            <span><i class="unqualified-icon"></i> 不合格</span>
          </div>
          <!--<div class="state-radio-wrap">
            <el-radio-group v-model="stateRadio" size="small" @change = "toggleTab">
              <el-radio-button label="1">当前断面</el-radio-button>
              <el-radio-button label="2">所有断面</el-radio-button>
            </el-radio-group>
          </div>-->
        </div>
      </div>
      <div class="currency-body-toggle">
        <!--<div v-show="stateRadio === '1'" style="height: 100%">
          <div class="tablebox" style="">
            <div class="table-head">
              <table>
                <tr>
                  <th width="13%">监测项目</th>
                  <th width="10%">单位</th>
                  <th width="17%">仪器测试值</th>
                  <th width="17%">人工测试值</th>
                  <th width="16%">误差</th>
                  <th width="17%">技术要求</th>
                  <th width="16%">是否合格</th>
                </tr>
              </table>
            </div>
            <el-scrollbar style="height:calc(100% - 32px)">
              <ul class="table-body clearfix">
                <li v-for="(item,index) in tableData">
                  <div class="toggle-row" :class="{active:item.toggle}">
                    <i class="toggle-icon" @click="toggleTable(item)" :class="{active:item.toggle}"></i>
                    <span>采样时间：{{ item.time }}</span>
                  </div>
                  <el-collapse-transition>
                    <div v-if="item.toggle">
                      <table>
                        <tr v-for="(n,m) in item.list">
                          <td width="13%">{{ n.indexName }}</td>
                          <td width="10%">{{ n.indexUnit }}</td>
                          <td width="17%">{{ n.automaticValue }}</td>
                          <td width="17%">{{ n.artificialValue }}</td>
                          <td width="16%">{{ n.error }}</td>
                          <td width="17%">{{ n.technicalCequirement }}</td>
                          <td width="16%">
                            <b v-if="parseInt(n.qualified) === 1">合格</b>
                            <b v-if="parseInt(n.qualified) === 0" style="color: red">不合格</b>
                          </td>
                        </tr>
                      </table>
                    </div>
                  </el-collapse-transition>
                </li>
              </ul>
            </el-scrollbar>
          </div>
        </div>-->
        <!--<div class="chart-wrap" v-show="stateRadio === '2'" style="height: 100%;">-->
          <div class="tablebox" style="">
            <el-table
              :data="tableData"
              border
              height="100%">
              <el-table-column
                type="index"
                label="序号">
              </el-table-column>
              <el-table-column
                prop="time"
                label="日期">
              </el-table-column>
              <el-table-column
                prop="samplingTime"
                label="采样时间">
              </el-table-column>
              <el-table-column
                prop="determination"
                label="测定结果（mg/L）">
                <el-table-column
                  prop="automaticValue"
                  label="系统">
                </el-table-column>
                <el-table-column
                  prop="artificialValue"
                  label="标准分析">
                </el-table-column>
              </el-table-column>
              <el-table-column
                prop="error"
                label="相对误差">
              </el-table-column>
              <el-table-column
                prop="technicalCequirement"
                label="相对误差范围">
              </el-table-column>
            </el-table>
          </div>
        <!--</div>-->
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "sampleComparison",
    data() {
      return {
        dateRange: '',
        value: "w01019",
         optionData:[],
        optionDataA: [
          {
            value: "w01019",
            label: "高锰酸盐"
          },
          {
            value: "w21003",
            label: "氨氮"
          },
          {
            value: "w21011",
            label: "总磷"
          },
          {
            value: "w21001",
            label: "总氮"
          }
        ],
        optionDataB:[
          {
            value: "w01018",
            label: "CODcr"
          },
          {
            value: "w21003",
            label: "氨氮"
          },
          {
            value: "w21011",
            label: "总磷"
          },
          {
            value: "w21001",
            label: "总氮"
          }
        ],
        optionData: [
          {
            value: "w01019",
            label: "高锰酸盐"
          },
          {
            value: "w21003",
            label: "氨氮"
          },
          {
            value: "w21011",
            label: "总磷"
          },
          {
            value: "w21001",
            label: "总氮"
          },
          {
            value: "w01016",
            label: "叶绿素"
          }
        ],
        currentPage: 1,
        pageSize: 1,
        pageList: [5, 10, 15],
        total: 1,
        tableData: [],
        stateRadio: "1"
      };
    },
    computed: {
      totalPageNumber() {
        //计算总页数
        let number = 0;
        number = Math.ceil(this.total / this.pageSize);
        return number;
      },
      stationInfo: {
        get: function() {
          return this.$store.state.stationInfo;
        }
      }
    },
    methods: {
      toggleTable(item) {
        if (item.toggle) {
          item.toggle = false;
        } else {
          item.toggle = true;
        }
      },
      toggleTab(val) {
        // console.log(val);
      },
      search(){
        this.getComparisonData();
      },
      //获取实际水样对比表格数据
      getComparisonData(){
        this.$http.get("/Quality/CQtestData/realWaterSampleComparisonData", {
          params: {
            startTime: this.dateRange,
            endTime: this.dateRange,
            indexCodes: this.value,
            stationCodes: this.stationId, //this.stationId
            ifCurrentSection: true,// true为当前断面,false为所有
          }
        }).then(res=>{
          if(res.data.code === 0){
            this.tableData = res.data.content.dataList;
          }
        });
      },
       setOptionData(){
        if(this.stationType){
          this.optionData = this.optionDataB;
          this.value =  "w01018";
        }else{
          this.optionData = this.optionDataA;
          this.value =  "w01019";
        }
        this.getComparisonData();
      },
      //
    },
    mounted() {

    },
    created() {
      //初始化时间
      this.dateRange = new Date(new Date().setMonth(new Date().getMonth() - 1));
    },
    watch: {
      stationInfo(value) {
        if (value.length > 0) {
          this.stationId = value[0].nodeId;
         
           if(value[0].stationType1 === '002'){
            this.stationType = true;
          
          }else{
            this.stationType = false;
           
          }
          this.setOptionData();
        }
      }
    }
  };
</script>

<style scope lang="less">
  .sampleComparison {
    .tablebox {
      height: 100%;
    }
    .table-head,
    .table-body {
      table {
        width: 100%;
        border-collapse: collapse;
        td,
        th {
          border: 1px solid #d6e3f2;
          padding: 0 3px;
          height: 30px;
          text-align: center;
        }
        th{
          font-weight: 100;
        }
      }
      .toggle-row {
        height: 30px;
        line-height: 30px;
        padding-left: 6px;
        border-left: 1px solid #d6e3f2;
        border-right: 1px solid #d6e3f2;
        border-bottom: 1px solid #d6e3f2;
        &.active {
          /*border-bottom: none;*/
        }
      }
    }
    .table-body {
      table {
        margin-top: -1px;
      }
    }
    .toggle-icon {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 3px;
      width: 13px;
      height: 13px;
      background: url("../../assets/images/retract-toggle.png") no-repeat;
      cursor: pointer;
      &.active {
        background: url("../../assets/images/open-toggle.png") no-repeat;
      }
    }
  }
</style>
